<!--畜牧动物信息管理-->
<template>
  <div>
    <div>
      <el-form :model="form" ref="queryForm" v-show="showSearch" :inline="true">
        <el-form-item label="种类名称" prop="roleName">
          <el-input v-model="form.name"
                    placeholder="请输入种类名称"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" @click="newAnimals">新增</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="reGetList"></right-toolbar>
      </el-row>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" stripe>
        <el-table-column prop="id" label="ID" width="80px">
        </el-table-column>
        <el-table-column prop="name" label="种类">
        </el-table-column>
        <el-table-column prop="message" label="基本信息">
        </el-table-column>
        <el-table-column prop="number" label="数量">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="vaccine" label="是否接种了疫苗">
        </el-table-column>
        <el-table-column prop="price" label="价格">
        </el-table-column>
        <el-table-column prop="sellNumber" label="销量（/天）">
        </el-table-column>
        <el-table-column label="操作" width="145px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" slot="reference" @click="del(scope.$index,scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page=queryParams.pageNum
        :page-size=queryParams.pageSize
        layout="total, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      </div>
      <div>
        <!--新增动物信息-->
        <el-dialog :visible.sync="dialogVisible1" width="30%">
          <el-form label-width="120px">
            <el-form-item :model="newTableData" label="产品名称">
              <el-input style="width: 80%" v-model="newTableData.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="用料信息">
              <el-input style="width: 80%" v-model="newTableData.message" clearable></el-input>
            </el-form-item>
            <el-form-item label="销量">
              <el-input style="width: 80%" v-model="newTableData.number" clearable></el-input>
            </el-form-item>
            <el-form-item label="生产地址">
              <el-input style="width: 80%" v-model="newTableData.address" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否打疫苗">
              <el-input style="width: 80%" v-model="newTableData.vaccine" clearable></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input style="width: 80%" v-model="newTableData.price" clearable></el-input>
            </el-form-item>
            <el-form-item label="销售数量">
              <el-input style="width: 80%" v-model="newTableData.sellNumber" clearable></el-input>
            </el-form-item>
          </el-form>
          <span class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveNewAnimals">提交</el-button>
    </span>
        </el-dialog>
      </div>
      <div>
        <!--新增产品-->
        <el-dialog :visible.sync="dialogVisible2" width="30%">
          <el-form label-width="120px">
            <el-form-item :model="newTableData" label="产品名称">
              <el-input style="width: 80%" v-model="newTableData.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="用料信息">
              <el-input style="width: 80%" v-model="newTableData.message" clearable></el-input>
            </el-form-item>
            <el-form-item label="销量">
              <el-input style="width: 80%" v-model="newTableData.number" clearable></el-input>
            </el-form-item>
            <el-form-item label="生产地址">
              <el-input style="width: 80%" v-model="newTableData.address" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否打了疫苗">
              <el-input style="width: 80%" v-model="newTableData.vaccine" clearable></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input style="width: 80%" v-model="newTableData.price" clearable></el-input>
            </el-form-item>
            <el-form-item label="销量">
              <el-input style="width: 80%" v-model="newTableData.sellNumber" clearable></el-input>
            </el-form-item>
          </el-form>
          <span class="dialog-footer">
                  <el-button @click="cancel">取消</el-button>
                  <el-button type="primary" @click="save">提交</el-button>
                </span>
        </el-dialog>
      </div>
  </div>
</template>

<script>

import {addAnimals, delAnimals, editAnimals, listAnimals, selectByName} from "@/api/animals/animals";

export default {
  data() {
    return {
      visible:false,
      dialogVisible:false,
      dialogVisible1:false,
      dialogVisible2:false,
      total:0,
      showSearch:true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [{
        id:0,
        name:'',
        message:'',
        number:'',
        address:'',
        vaccine:'',
        price:0,
        sellNumber:0
      }],newTableData:{
        id:0,
        name:'',
        message:'',
        number:0,
        address:'',
        vaccine:'',
        price:0,
        sellNumber:0
      }
      ,form:{
        name:''
      }
    }
  },
  created:function (){
    this.getList()
  },
  methods:{
    getList() {
      listAnimals(this.queryParams).then(
        res => {
          this.tableData = res.data;
          this.total = parseInt(res.msg)
        }
      );
    }, reGetList() {
      this.queryParams.pageNum=1
      this.getList()
    },handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.getList()
    },resetQuery(){
      this.form={}
      this.reGetList()
    },handleQuery(){
      this.queryParams.pageNum=1
      selectByName({'name':this.form.name}).then(res=>{
        this.tableData=res.data
        this.total=parseInt(res.msg)
      })
    },handleEdit(index,row){
      this.dialogVisible2=true
      this.newTableData={}
      this.newTableData=JSON.parse(JSON.stringify(row))
    },del(index,row){
      delAnimals(JSON.stringify({'id':row.id})).then(res=>{
        if(res.data==true){
          this.queryParams.pageNum=1
          this.getList()
        }else{
          this.$message('删除失败，请重新再试')
        }
      })
    },newAnimals(){
      this.dialogVisible1=true;
      this.newTableData={}
    },saveNewAnimals(){
      addAnimals(this.newTableData).then(res=>{
        if(res.data==true){
          this.queryParams.pageNum=1
          this.getList()
          this.dialogVisible1=false
          this.$message('添加成功')
        }else{
          this.$message('添加失败，请重新再试')
        }
      })
    },save(){
      editAnimals(this.newTableData).then(res=>{
        if(res.data==true){
          this.queryParams.pageNum=1
          this.getList()
          this.dialogVisible2=false
          this.$message('修改成功')
        }else{
          this.$message('修改失败，请重新再试')
        }
      })
    },cancel(){
      this.dialogVisible1=false
      this.dialogVisible2=false
    }
  }
}
</script>

<style>
</style>
